<template>
    <view class="container">
        <view class="card-container">
            <view class="title-content">
                <text class="left-text">水本: NO.{{bill_num}}</text>
<!--                <view class="change-content">-->
<!--                    <u-icon name="reload"></u-icon>-->
<!--                    <text>切换水本</text>-->
<!--                </view>-->
            </view>
            <view class="merchant-content">
                <u-icon name="map"></u-icon>
                <text>{{merchant_name}}</text>
            </view>
            <view class="center-line"></view>
            <view class="bottom-content">
                <text class="num">{{num}}</text>
                <text class="desc">{{goods_name}}</text>
            </view>
        </view>

        <view class="main">
            <view class="item" @click="openChooseAddressModal">
                <view class="left-content">
                    <view class="top-content">
                        <u-icon name="map"></u-icon>
                        <text>配送地址</text>
                    </view>
                    <text class="text" :style="{'color': selectedAddress ? '#333333':'grey'}">
                        {{!selectedAddress ? '请选择' : selectedAddress.province + selectedAddress.city + selectedAddress.area + selectedAddress.address}}
                    </text>
                </view>
                <view class="right-content">
                    <u-icon name="arrow-right" color="#939393" size="25"></u-icon>
                </view>
            </view>

            <view class="item" @click="openChooseTimeModal">
                <view class="left-content">
                    <view class="top-content">
                        <u-icon name="clock"></u-icon>
                        <text>配送时间</text>
                    </view>
                    <text class="text">{{!timeSelectedObj.date ? '今天立即送' :  timeSelectedObj.date + '  ' + timeSelectedObj.day}}</text>
                </view>
                <view class="right-content">
                    <u-icon name="arrow-right" color="#939393" size="25"></u-icon>
                </view>
            </view>

<!--            <view class="item">-->
<!--                <view class="left-content">-->
<!--                    <view class="other-content">-->
<!--                        <view class="left">-->
<!--                            <u-icon name="order"></u-icon>-->
<!--                            <text>配送产品</text>-->
<!--                        </view>-->
<!--                        <text class="product-name">选择需要配送的产品</text>-->
<!--                    </view>-->
<!--                </view>-->
<!--                <view class="right-content">-->
<!--                    <u-icon name="arrow-right" color="#939393" size="25"></u-icon>-->
<!--                </view>-->
<!--            </view>-->

        </view>

        <view class="btn-container" @click="buildOrder">
            预约送水
        </view>

        <s-choose-address :show="chooseAddressModal"
                          @choose="onChooseAddress"
                          @close="closeChooseAddressModel"></s-choose-address>

        <!--<s-choose-time :show="chooseTimeModal"
                          @choose="onChooseTime"
                          @close="closeChooseTimeModel"></s-choose-time>-->

        <u-picker v-model="chooseTimeModal" mode="multiSelector" confirm-color="#0fc65b"
                  :default-selector='[timeSelectedObj.leftIndex, timeSelectedObj.rightIndex]'
                  :range="timeSelector"
                  @confirm="onChooseTime"></u-picker>

    </view>
</template>

<script>
    import chooseAddress from './components/choose-address'
    import chooseTime from './components/choose-time'
    import {buillUserWaterOrder} from "../../api";
    export default {
        components: {
            's-choose-address': chooseAddress,
            's-choose-time': chooseTime
        },
        data() {
            return {
                chooseAddressModal: false,
                selectedAddress: '',
                chooseTimeModal: false,
                selectedTime: '',
                timeSelector: [],
                timeSelectedObj: {
                    leftIndex: 0,
                    rightIndex: 0,
                    date: '',
                    day: ''
                },
              bill_num:"",
              merchant_name:"",
              goods_name:"",
              num:1,
              delivery_day:"",
              delivery_time:""
            }
        },
        watch: {

        },
        onShow(){
          this.getUserWater()
        },
        onLoad(options) {
            this.initTimeSelectorData()

        },
        methods: {
            async buildOrder(){

              let params = {
                user_token: wx.getStorageSync("userToken"),
                delivery_day : this.delivery_day,
                delivery_time:this.delivery_time,
                address_id:this.selectedAddress.id
              }

              const res=await this.$api.buillUserWaterOrder(params,this.$baseUrl);
              if(res.data.level == "success"){
                uni.showToast({
                  icon: 'none',
                  title: res.data.message,
                  duration: 1500
                })
                setTimeout(()=>{
                  wx.switchTab({
                    url:"/pages/person/person"
                  });
                },1500)
              }else {
                uni.showToast({
                  icon: 'none',
                  title: res.data.message,
                  duration: 1500
                })
              }
            },
            async getUserWater(){
                let params = {
                  user_token: wx.getStorageSync("userToken")
                }

              const res=await this.$api.getUserWater({params},this.$baseUrl);
              if(res.data.level=='success'){
                  this.bill_num = res.data.data.bill_num;
                  this.merchant_name = res.data.data.merchant_name;
                  this.goods_name    = res.data.data.goods_name;
                  this.num = "+"+res.data.data.water_empty_num;
              }
            },

            openChooseAddressModal() {
                this.chooseAddressModal = true
            },

            closeChooseAddressModel() {
                this.chooseAddressModal = false
            },

            onChooseAddress(item) {
                this.selectedAddress = item
                console.log('选择的地址',this.selectedAddress)
            },

            openChooseTimeModal() {
                this.chooseTimeModal = true
            },

            onChooseTime(array) {
                this.timeSelectedObj.leftIndex = array[0]
                this.timeSelectedObj.rightIndex = array[1]
                this.timeSelectedObj.date = this.timeSelector[0][array[0]]
                this.timeSelectedObj.day = this.timeSelector[1][array[1]]
                console.log('选择的日期',this.timeSelector[0][array[0]])
                this.delivery_day=this.timeSelector[0][array[0]]
                this.delivery_time=this.timeSelector[1][array[1]]
                console.log('选择的时间',this.timeSelector[1][array[1]])
            },

            initTimeSelectorData() {
                const leftData = []
                //获取后3天的日期
                for (let i = 1; i <= 3 ; i++) {
                    leftData.push(this.getDateString(i))
                }
                const rightData = ['9:00-12:00','12:00-15:00','15:00-17:00','17:00-19:00']
                this.timeSelector = [leftData,rightData]
            },

            getDateString(index) {
                const date = new Date();
                const newDate = new Date();
                const minuts = date.getTime() + 1000 * 60 * 60 * 24 * parseInt(index);
                newDate.setTime(minuts);
                const year = newDate.getFullYear();
                const month = (newDate.getMonth() + 1) >= 10 ? newDate.getMonth() + 1 : '0' + (newDate.getMonth() + 1);
                const day = newDate.getDate() >= 10 ? newDate.getDate() : '0' + newDate.getDate();
                return year + '-' + month + '-' + day;
            }

            /*closeChooseTimeModel() {
                this.chooseTimeModal = false
            },*/

        }
    };
</script>

<style lang="scss" scoped>
    .card-container {
        width: 710rpx;
        background-color: #0abf4c;
        border-radius: 20rpx;
        box-shadow: 0px 0px 8px 2px rgba(119, 163, 149, 0.2);
        margin-left: auto;
        margin-right: auto;
        color: #ffffff;
        padding: 30rpx;
        box-sizing: border-box;
        font-size: 30rpx;
        margin-top: 16rpx;
        .title-content {
            display: flex;
            justify-content: space-between;
            .change-content {
                display: flex;
                align-items: center;
                text {
                    font-size: 24rpx;
                    margin-left: 10rpx;
                }
            }
        }
        .merchant-content {
            display: flex;
            margin-top: 20rpx;
            align-items: center;
            text {
                margin-left: 10rpx;
                font-size: 24rpx;
                vertical-align: baseline;
            }
        }
        .center-line {
            width: 100%;
            height: 4rpx;
            background-color: #32d66e;
            margin: 30rpx 0;
        }

        .bottom-content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 30rpx 0;
            .num {
                font-size: 60rpx;
                font-weight: bold;
            }
            .desc {
                font-size: 24rpx;
                margin-top: 8rpx;
            }
        }
    }

    .main {
        width: 680rpx;
        margin-top: 50rpx;
        margin-left: auto;
        margin-right: auto;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1rpx solid #f3f2f2;
            height: 130rpx;
            .left-content {
                display: flex;
                flex-direction: column;
                .top-content {
                    display: flex;
                    color: grey;
                    font-size: 27rpx;
                    text {
                        margin-left: 16rpx;
                    }
                }
                .text {
                    width: 620rpx;
                    color: #333333;
                    font-size: 29rpx;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    font-weight: 600;
                    margin-top: 15rpx;
                }
                .other-content {
                    width: 620rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left {
                        display: flex;
                        color: #333333;
                        font-size: 28rpx;
                        text {
                            margin-left: 12rpx;
                        }
                    }
                    .product-name {
                        font-size: 24rpx;
                        color: grey;
                    }
                }
            }
            .right-content {

            }
        }
    }

    .btn-container {
        width: 680rpx;
        background-color: #0fc65b;
        margin-left: auto;
        margin-right: auto;
        margin-top: 60rpx;
        height: 85rpx;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 28rpx;
    }

</style>
